<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    *{
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    div{
      margin: 20px auto;
    }
    h1{
      text-align: center;
    }
    /*
      在一些特殊场景下，我们可以需要用到条纹背景
      虽然很少，但是也会有，而且玩转背景也是对于前端的必备技能

      别眨眼，CSS样式将带你起飞

     */
    .box{
      width: 400px;
      height: 200px;
      /*background: linear-gradient(purple,skyblue);!*此时，我们的渐变盒子就有了*!*/
      /*background-image: linear-gradient(to top, #fbc2eb 0%, #a6c1ee 100%);*/
      background-image: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%);
    }

    .box2{
      width: 400px;
      height: 200px;
      /*接下来，我们把两个色标拉近一点*/
      background: linear-gradient(#fb3 20%,#58a 80%);/*此时，我们的渐变盒子就有了*/
      /* 如果多个色标具有相同的位置，他们就会产生一个无限小的过渡区域
         过度的起止色分别是第一个和最后一个指定值。从效果上看，颜色会在那个位置突然变化
         ，而不是一个平滑的过程
       */
    }
    .box3{
      width: 400px;
      height: 200px;
      background: linear-gradient(#fb3 50%,#58a 50%);/*此时，我们的渐变盒子就有了*/

      background-size: 100% 30px;
      /*
        这个时候，我们将两条条纹的高度都缩小到了 15px，
        我们可以通过 background-size 调整其高度
       */
    }
    .box4{
      width: 400px;
      height: 200px;
      /*background: linear-gradient(#fb3 30%,#58a 30%);!*此时，我们的渐变盒子就有了*!*/
      background: linear-gradient(#fb3 30%,#58a 0);
      background-size: 100% 30px;
      /* 如果想要调整条纹的大小，就可以修改 颜色的百分比 */
      /* 如果某个色标的位置比整个列表中在它之前的色标的位置都要小
         则该色标的位置值会被设置为它前面所有色标位置值的最大值
       */
    }

    .box5{
      width: 400px;
      height: 200px;
      background: linear-gradient(to left,#fb3 30% , #58a 0);
      background-size: 30px 100%;
    }
    .box6{
      width: 400px;
      height: 200px;
      background: linear-gradient(45deg,#fb3 50% , #58a 50%);
      background-size: 42.4px 42.4px;
      /*
        这个42.4px 是我们通过勾股定理算出来的，所以，如果我们这里强烈建议你
        使用 42.px 或者 42px
        当然除非有人拿着枪顶着你的脑袋威胁你必须把斜条宽度改为 15 px
       */
    }
    .box7{
      /**
        在前面的方式，我们发现我们展示的方法不够灵活
        因为如果我想要调整角度，那么这个时候会发生什么效果？
       */
      width: 400px;
      height: 200px;
      background: linear-gradient(60deg,#fb3 50% , #58a 50%);
      background-size: 42.4px 42.4px;
    }
    .box8{
      width: 400px;
      height: 200px;
      background: linear-gradient(140deg, #c9c9c9 0% , #FFFFFF 80%);
      background-size: 42.4px 42.4px;
    }
    .box9{
      width: 400px;
      height: 200px;
      background: #58a;
      /**
        repeating-linear-gradient
        渐变线的起始位置，默认为to bottom
        渐变线的方向角。
        一个颜色停止值

      **/
      background-image: repeating-linear-gradient(30deg,
        hsla(0,0%,100%,.1),
        hsla(0,0%,100%,.1) 15px,
        transparent 0 ,transparent 30px
      );
      /*background: repeating-linear-gradient(30deg,*/
      /*#79b,#79b 15px , #58a 0 , #58a 30px);*/
    }


  </style>
</head>
<body>
  <h1>水平条纹</h1>
  <div class="box"></div>
  <div class="box2"></div>
  <div class="box3"></div>
  <div class="box4"></div>
  <h1>垂直条纹</h1>
  <div class="box5"></div>
  <h1>斜向条纹</h1>
  <div class="box6"></div>
  <h1>更好的斜向条纹</h1>
  <div class="box7"></div>
  <h1>渐变的斜向条纹</h1>
  <div class="box8"></div>
  <h1>灵活的同色系条纹</h1>
  <div class="box9"></div>
</body>
</html>